import CModalForm from "@/components/CModalForm";
import {CModalFormProps} from "@/components/CModalForm/type";
import {ModalFormProps} from "@ant-design/pro-form/lib/layouts/ModalForm";
import {IndexData} from "@/pages/system/tool/gen/add/interfaces";
import IndexTable from "@/pages/system/tool/gen/add/Stateless/componets/IndexTable";
import {EditableProTableProps} from "@ant-design/pro-table/lib/components/EditableTable";
import {columns} from "@/pages/system/tool/gen/add/Stateless/componets/IndexTable/config/columns";
import {AddIndexProps} from "@/pages/system/tool/gen/add/Stateless/componets/AddIndex/interfaces";

export default (props: AddIndexProps & ModalFormProps<IndexData>) => {
  const modalFormProps: CModalFormProps<IndexData> = {
    ...props,
    groupList: [],
    submitter: {
      resetButtonProps: {}
    },
    width: 1200
  }


  const indexTableProps: EditableProTableProps<IndexData, IndexData> = {
    toolbar: {},
    headerTitle: null,
    search: false,
    toolBarRender: false,
    tableAlertRender: () => null,
    tableAlertOptionRender: false,
    recordCreatorProps: {
      newRecordType: 'dataSource',
      position: "bottom",
      record: (index: number, dataSource) => {
        return {id: Date.now().toString()}
      }
    },
    // @ts-ignore
    columns: columns(props.genFieldList),
    value: props.indexList,
    onChange: props.setIndexList,
    editable: {
      type: "multiple",
      onValuesChange:
        (record, recordList) => {
          props.setIndexList(recordList);
        },
      actionRender: (row, config, defaultDoms) => {
        return [defaultDoms.delete];
      },
    },
    rowKey: "id"

  }
  return (
    <CModalForm {...modalFormProps}>
      <IndexTable {...indexTableProps}/>
    </CModalForm>
  )
}
